<template>
	<view class="container" :style="{paddingTop:`${statusBarHeight}px`}">
		<image class="bg" src="@/static/image/index-bg.png" mode="widthFix"></image>
		<view class="main">
			<view class="nav">
				<image class="logo" :src="indexData.site.logo" mode=""></image>
				<view class="right">
					<!-- <picker @change="bindPickerChange" :range="indexData.currency" range-key='text'>
						<image src="@/static/image/nav-icon1.png" mode=""></image>
					</picker> -->
					<image @click="handleOpen" src="@/static/image/nav-icon1.png" mode=""></image>
					<navigator url="/pages/account/account">
						<image src="@/static/image/nav-icon2.png" mode=""></image>
					</navigator>
				</view>
			</view>
			<swiper class="banner" circular autoplay>
				<swiper-item v-for="item in indexData.banner">
					<image :src="item.image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="notice">
				<image src="@/static/image/notice.png" mode=""></image>
				<swiper class="text" circular autoplay vertical>
					<swiper-item v-for="item in indexData.notice">
						<text class="ovh">{{item.title}}</text>
					</swiper-item>
				</swiper>
			</view>
			<view class="balance">
				<view class="left" @click="eye=!eye">
					<uni-icons v-if="eye" type="eye" size="16"></uni-icons>
					<uni-icons v-else type="eye-slash" size="16"></uni-icons>
				</view>
				<navigator url="/pages/wallet/index">
					<image class="right" src="@/static/image/info-icon2.png" mode=""></image>
				</navigator>
				<view class="title">
					{{currencyTitle}}
				</view>
				<view class="num">
					{{currency}}<text :class="{hideNum:!eye}">{{userInfo.wallet.money}}</text>
				</view>
				<view class="tips">
					{{currencyTips}}
				</view>
			</view>
			<navigator url="/pages/card/list">
				<view class="sellBtn">
					Sell Gift Card
					<image src="@/static/image/sell-icon.png" mode=""></image>
				</view>
			</navigator>
			<view class="tel">
				<navigator url="/pages/account/invite">
					<image src="@/static/image/app-icon3.png" mode=""></image>
				</navigator>
				<navigator url="/pages/vip/vip">
					<image src="@/static/image/app-icon2.png" mode=""></image>
				</navigator>
				<a :href="`https://api.whatsapp.com/send?phone=${indexData.site.whatsapp}&text=Hello`">
					<image src="@/static/image/app-icon1.png" mode=""></image>
				</a>
			</view>
			<navigator url="/pages/transactions">
				<view class="info">
					<swiper class="text" circular autoplay vertical>
						<swiper-item class="content" v-for="item in indexData.trade">
							<image class="icon" :src="item.avatar" mode=""></image>
							<view class="title">
								{{item.username}}
							</view>
							<view class="tips">
								{{item.trade_info}}
							</view>
							<image class="more" src="@/static/image/more.png" mode=""></image>
						</swiper-item>
					</swiper>
				</view>
			</navigator>
			<view class="list-title">
				Hot cards
			</view>
			<view class="list">
				<view class="col" v-for="item in list">
					<navigator :url="`/pages/card/add?id=${item.id}`">
						<view class="item">
							<view class="upper">
								<image :src="item.image" mode=""></image>
								<view class="title ovh2">
									{{item.card_title}}
								</view>
							</view>
							<view class="bottom">
								<view class="">
									<text>UP TO</text> {{item.currency_unit}} {{item.amount}}
								</view>
								<image src="@/static/image/more.png" mode=""></image>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<uni-popup ref="popup">
			<view class="popup">
				<view class="title">
					Settlement currency
				</view>
				<view class="list">
					<view class="item" :class="{active:active==item.unit}" @click="bindPickerChange(item)"
						v-for="item in indexData.currency">
						{{item.text}}
					</view>
				</view>
				<view class="submitBtn" @click="update">
					Apply >
				</view>
			</view>
		</uni-popup>
		<tabbar active="1" />
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar.vue"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				statusBarHeight: uni.getStorageSync('statusBarHeight'),
				eye: false,
				indexData: {
					site: {}
				},
				currency: '',
				currencyTitle: '',
				currencyTips: '',
				list: [],
				userInfo: {
					userinfo: {},
					wallet: {}
				},
				active: ''
			}
		},
		onShow() {
			const token = uni.getStorageSync("token")
			if (!token) {
				console.log(token)
				uni.reLaunch({
					url: "/pages/landing"
				})
				return
			}
			this.getData()
		},
		methods: {
			getData() {
				this.$post("/index/get_data").then(res => {
					this.indexData = res.data
					uni.setStorage({
						data: res.data.currency[0].value,
						key: "currency_id"
					})
					uni.setStorageSync('site', this.indexData.site)
					uni.setStorageSync('balance', this.indexData.balance)
					this.currency = res.data.currency[0].unit
					this.currencyTitle = res.data.currency[0].text + ' balance'
					this.currencyTips = res.data.currency[0].remark
					this.active = res.data.currency[0].unit
					this.getList()

				})
			},
			getList() {
				this.$post("/index/cards_hot", {
					currency_id: uni.getStorageSync("currency_id")
				}).then(res => {
					this.list = res.data
					this.getInfo()
				})
			},
			getInfo() {
				this.$post("/user/userinfo", {
					currency_id: uni.getStorageSync("currency_id")
				}).then(res => {
					this.userInfo = res.data
				})
			},
			bindPickerChange(item) {
				uni.setStorage({
					data: item.value,
					key: "currency_id"
				})
				this.active = item.unit


			},
			handleOpen() {
				this.$refs.popup.open('bottom')
			},
			update() {
				this.currency = this.active
				this.$refs.popup.close()
				let that = this
				this.indexData.currency.forEach(function(item) {
					if (item.unit == that.active) {
						that.currencyTitle = item.text + ' balance'
						that.currencyTips = item.remark
					}
				})
				this.getList()
			}
		},
		filters: {
			filtersName(name) {
				const start = name.slice(0, 3);
				const end = name.slice(-4);
				return start + '****' + end;
				console.log(name)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F1F2F7;
	}

	.container {
		padding: 32rpx;
		position: relative;

		.bg {
			position: absolute;
			width: 100%;
			left: 0;
			top: 0;
		}

		.main {
			position: relative;
		}
	}

	.nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;

		.logo {
			width: 218rpx;
			height: 52rpx;
		}

		.right {
			display: flex;

			uni-navigator {
				margin-left: 40rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;

			}
		}
	}

	.banner {
		height: 320rpx;
	}

	.notice {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		margin: 18rpx 0;

		image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}

		.text {
			height: 48rpx;
			width: calc(100% - 58rpx);
			line-height: 48rpx;
		}
	}

	.balance {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 8rpx;
		margin: 18rpx 0;
		position: relative;
		text-align: center;

		image {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 20rpx;
		}

		.left {
			position: absolute;
			left: 22rpx;
			top: 20rpx;
		}

		.right {
			right: 22rpx;
		}

		.title {
			font-size: 26rpx;
			font-weight: bold;
		}

		.num {
			font-weight: bold;
			font-size: 48rpx;

			.hideNum {
				-webkit-text-security: disc;
			}
		}

		.tips {
			font-size: 20rpx;
			color: #999;

			text {
				color: #0C0E27;
				padding: 0 8rpx;
			}
		}
	}

	.sellBtn {
		background: #0C0E27;
		border-radius: 8rpx;
		margin: 18rpx 0;
		line-height: 88rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 33rpx;
			height: 25rpx;
			margin-left: 20rpx;
		}
	}

	/deep/ a {
		text-decoration: none;
		line-height: 0;
	}

	.tel {
		background: linear-gradient(90deg, #3EFDDB, #FF3AD5);
		border-radius: 8rpx;
		margin: 18rpx 0;
		line-height: 88rpx;
		color: #fff;
		font-size: 26rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		height: 88rpx;

		navigator {
			height: 45rpx;
		}

		image {
			width: 47rpx;
			height: 45rpx;
			display: block;
		}
	}

	.info {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 8rpx;

		font-size: 22rpx;
		margin: 18rpx 0;

		.text {
			height: 80rpx;
		}

		.content {
			display: flex;
			align-items: center;
			justify-content: space-between;

		}

		.title {
			font-size: 28rpx;
			max-width: 180rpx;
		}

		.tips {
			font-size: 22rpx;
			width: calc(100% - 300rpx);
			word-break: break-all;
			padding: 0 20rpx;
		}

		.icon {
			width: 64rpx;
			height: 64rpx;
		}

		.more {
			width: 14rpx;
			height: 26rpx;
		}
	}

	.list-title {
		font-size: 36rpx;
		font-weight: bold;
		padding: 30rpx 0 20rpx;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		margin: -8rpx;

		.col {
			width: 50%;
			padding: 8rpx;

			.item {
				background-color: #fff;
				border-radius: 8rpx;
				padding: 18rpx;

				.upper {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					image {
						width: 68rpx;
						height: 48rpx;
					}

					.title {
						font-size: 24rpx;
						padding-left: 16rpx;
						height: 70rpx;
					}
				}

				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					background-color: rgba($color: #3959FA, $alpha: 0.05);
					border-radius: 8rpx;
					padding: 6rpx 10rpx;
					font-size: 24rpx;

					text {
						color: #999;
						margin-right: 10rpx;
					}

					image {
						width: 11rpx;
						height: 20rpx;
					}
				}
			}
		}
	}

	.popup {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 40rpx;

		.title {
			font-weight: bold;
			font-size: 36rpx;
			text-align: center;
		}

		.list {
			display: block;
			margin: 80rpx 0;
			text-align: center;
			line-height: 70rpx;

			.active {
				color: #fff;
				background-color: #0C0E27;
				border: 4rpx;
			}

		}
	}
</style>